<template>
  <div class="???" style="position: relative">
    <el-row gutter="100">
      <el-col :span="8">
        <el-card>
          <span slot="header">本年度合同金额(万元)</span><span v-text="amount[0]/10000"></span>
          </el-card>
          </el-col>
      <el-col :span="8">
        <el-card>
          <span slot="header">本年度未回款合同金额(万元)</span><span v-text="amount[1]/10000"></span>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card><span slot="header">本年已回款合同金额(万元)</span><span v-text="amount[2]/10000"></span>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-col :span="24">
        <el-card class="?#?" shadow="never" :body-style="{ padding: '0px' }">
          <div slot="header">
            <h2>合同金额同比增长图</h2>
            <el-form :model="bform" size="mini" label-width="80px" @submit.native.prevent>
              <el-form-item label="业务类型" style="display:inline-block;">
                <el-cascader
                  v-model="businessType"
                  placeholder="全部"
                  ref="ref_business"
                  :options="businesstypeTree"
                  :props="typeProps"
                  :show-all-levels="false"
                  clearable
                  @change="showStat">
                </el-cascader>
              </el-form-item>
            </el-form>
            <div id="barChart" :style="{width: '800px', height: '400px'}"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card class="#?#" shadow="never" :body-style="{ padding: '0px' }">
          <div slot="header">
            <h2>合同金额报表</h2>
            <el-form :model="tform" size="mini" label-width="80px" @submit.native.prevent>
              <el-form-item label="业务类型" style="display:inline-block;">
                <el-cascader
                  v-model="businessType"
                  placeholder="全部"
                  ref="ref_business"
                  :options="businesstypeTree"
                  :props="typeProps"
                  :show-all-levels="false"
                  clearable
                  @change="showStat">
                </el-cascader>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="year" label="日期" width="60"></el-table-column>
              <el-table-column prop="jan" label="1月" width="80"></el-table-column>
              <el-table-column prop="feb" label="2月" width="80"></el-table-column>
              <el-table-column prop="mar" label="3月" width="80"></el-table-column>
              <el-table-column prop="apr" label="4月" width="80"></el-table-column>
              <el-table-column prop="may" label="5月" width="80"></el-table-column>
              <el-table-column prop="jun" label="6月" width="80"></el-table-column>
              <el-table-column prop="jul" label="7月" width="80"></el-table-column>
              <el-table-column prop="aug" label="8月" width="80"></el-table-column>
              <el-table-column prop="sep" label="9月" width="80"></el-table-column>
              <el-table-column prop="oct" label="10月" width="80"></el-table-column>
              <el-table-column prop="nov" label="11月" width="80"></el-table-column>
              <el-table-column prop="dec" label="12月" width="80"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts';
import { Businesstype } from '@/api/business.js';
import { InvitationStatisticsTable } from '@/api/bigdata.js';
export default {
  data () {
    return {
      businesstypeTree: [],
      businessType: [],
      amount: [],
      amountDivided: [],
      dataSet: [],
      tableData: [],
      typeProps: {
        value: 'id',
        label: 'businessName',
        checkStrictly: true /*  multiple: true, */,
        children: 'children'
      }
    };
  },
  mounted () {
    this.showCard();
    this.loadbusinesstypeTree();
    this.showStat();
  },
  methods: {
    showCard () {
      return new Promise((resolve, reject) => {
        InvitationStatisticsTable.contractCurrentYear(this).then(res => {
          this.amount = res.data;
        }).catch(e => {
          reject(e);
        });
      });
    },
    // 获取统计数据
    showStat () {
      let params = {
        businessType: this.businessType[this.businessType.length - 1]
      }
      return new Promise((resolve, reject) => {
        InvitationStatisticsTable.contractChart(this, params).then(res => {
          this.dataSet = res.data;
          this.initBar();
          this.initTable();
          // initTable
        }).catch(e => {
          reject(e);
        });
      });
    },
    // 显示条形图
    initBar () {
      let getBar = echarts.init(document.getElementById('barChart'));
      let barSeries = [];
      for (let i = 0; i < this.dataSet.length; i++) {
        barSeries.push({
          name: this.dataSet[i].year,
          data: this.dataSet[i].monthAmount,
          type: 'line'
        });
      }
      var option = {
        legend: {},
        xAxis: {
          type: 'category',
          data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Oct', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
          type: 'value'
        },
        series: barSeries
      };
      getBar.setOption(option)
    },
    // 显示表格
    initTable () {
      this.tableData = [];
      for (let i = 0; i < this.dataSet.length; i++) {
        this.tableData.push({
          year: this.dataSet[i].year,
          jan: Math.round(this.dataSet[i].monthAmount[0] / 10000) + '万',
          feb: Math.round(this.dataSet[i].monthAmount[1] / 10000) + '万',
          mar: Math.round(this.dataSet[i].monthAmount[2] / 10000) + '万',
          apr: Math.round(this.dataSet[i].monthAmount[3] / 10000) + '万',
          may: Math.round(this.dataSet[i].monthAmount[4] / 10000) + '万',
          jun: Math.round(this.dataSet[i].monthAmount[5] / 10000) + '万',
          jul: Math.round(this.dataSet[i].monthAmount[6] / 10000) + '万',
          aug: Math.round(this.dataSet[i].monthAmount[7] / 10000) + '万',
          sep: Math.round(this.dataSet[i].monthAmount[8] / 10000) + '万',
          oct: Math.round(this.dataSet[i].monthAmount[9] / 10000) + '万',
          nov: Math.round(this.dataSet[i].monthAmount[10] / 10000) + '万',
          dec: Math.round(this.dataSet[i].monthAmount[11] / 10000) + '万'
        })
      }
    },
    // 级联下拉列表数据获取
    loadbusinesstypeTree () {
      return new Promise((resolve, reject) => {
        Businesstype.tree(this)
          .then((res) => {
            this.businesstypeTree = res.data;
          })
          .catch((e) => {
            reject(e);
          });
      });
    }
  }
};
</script>
